<template>
  <div class="card-box">
    <div class="home-title">待办事项</div>
    <div class="content">
      <div class="work-analyze">
        <div id="analyzeChart">
          <div>
            <el-progress
              type="circle"
              color="rgba(23,188,132)"
              :width="150"
              :stroke-width="10"
              :percentage="percentCalc(workItems[0].value, workItems[3].value)"
              :format="format"
            >
            </el-progress>
          </div>
          <div class="custom-progress-text">
            <span>{{ workItems[0].value }}</span>
            <span>待处理</span>
          </div>
        </div>
        <div class="work-total">
          <div
            class="work-items"
            v-for="(item, index) in workItems"
            :key="index"
          >
            <label>{{ item.label }}</label>
            <span class="work-value">{{ item.value }}</span>
            <span>项</span>
          </div>
        </div>
      </div>
      <div class="work-content">
        <el-tabs
          v-model="active"
          type="border-card"
          tab-position="top"
          @tab-click="tabsClick"
        >
          <el-tab-pane
            v-for="item in panes"
            :key="item.key"
            :label="item.label"
            :name="item.key"
          >
          </el-tab-pane>

          <!-- <div v-if="active == '1'"> -->
          <div class="list-wrapper">
            <ul v-if="todoList.length > 0">
              <li
                v-for="(item, index) in todoList"
                class="list-item"
                :key="index"
              >
                <div>【{{ item.sub_scene }}】</div>
                <div>{{ item.object_name }}</div>
                <div>
                  <el-popover trigger="hover" placement="top">
                    <div>
                      {{ item.description }}
                    </div>
                    <div slot="reference" class="name-wrapper">
                      <el-tag type="danger" size="mini">红色预警</el-tag>
                    </div>
                  </el-popover>
                </div>
                <div>{{ item.dept_name }}</div>
                <div>{{ item.status_text }}</div>
                <div>
                  <el-button
                    type="success"
                    size="mini"
                    @click="handleDetails(item)"
                    >查看</el-button
                  >
                </div>
              </li>
            </ul>
            <el-empty v-else :image-size="80"></el-empty>
          </div>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { getTodoMatters, getTodoCount, getDCGWorkTodo } from "@/api/Home/Index";
import commonList from "@/mixins/commonList";
export default {
  mixins: [commonList],
  props: {
    homeRole: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      active: "1",
      panes: [
        {
          key: "1",
          label: "待办",
        },
        {
          key: "2",
          label: "已办",
        },
        {
          key: "3",
          label: "督办",
        },
      ],
      workItems: [
        { label: "待办", value: "0" },
        { label: "已办", value: "0" },
        { label: "督办", value: "1" },
        { label: "全部", value: "1" },
      ],
      todoList: [],
    };
  },
  methods: {
    initData() {
      if (this.homeRole == 3) {
        getTodoCount().then((res) => {
          if (res.code == 0) {
            this.workItems[0].value = res.data[0].num;
            this.workItems[1].value = res.data[0].num2;
            this.workItems[2].value = res.data[0].num3;
            this.workItems[3].value = res.data[0].num4;
          }
        });

        this.initTodoList("待办");
      }

      if (this.homeRole == 4) {
        getDCGWorkTodo().then((res) => {
          if (res.code == 0) {
            this.workItems[0].value = res.data[0].num;
            this.workItems[1].value = res.data[0].num2;
            this.workItems[2].value = res.data[0].num3;
            this.workItems[3].value = res.data[0].num4;
          }
        });
      }
    },
    initTodoList(type) {
      getTodoMatters({
        type: type,
      }).then((res) => {
        if (res.code == 0) {
          this.todoList = res.data;
        }
      });
    },
    tabsClick(item) {
      if (this.homeRole == 3) {
        this.initTodoList(item.label);
      }
    },
    format() {
      return ``;
    },
    handleDetails(item) {
      this.$router.push(`/redAlert/assignForm/${item.id}/0`);
    },
    percentCalc(todo, all) {
      let a = parseInt(todo);
      let b = parseInt(all);

      if (b == 0) {
        return 100;
      } else {
        return b - a / b;
      }
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
@import "./home.scss";

.el-tabs--border-card {
  height: 100%;
}

.content {
  height: 300px;
  > div {
    height: 100%;
  }
}
.work-analyze {
  width: 30%;
  display: flex;
  background-color: rgba(236, 245, 255, 1);

  #analyzeChart {
    width: 60%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    div {
      &:nth-child(2) {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        span {
          &:nth-child(1) {
            color: rgba(41, 97, 221, 1);
            font-weight: 600;
            font-size: 20px;
          }
          &:nth-child(2) {
          }
        }
      }
    }
  }

  .work-total {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .work-value {
      color: rgba(41, 97, 221, 1);
      font-weight: 600;
      font-size: 20px;
      margin: 0 5px;
    }
  }
}

.work-content {
  width: 70%;
  margin-left: 20px;
}
.list-wrapper {
  ul {
    width: 100%;
    margin: 0 auto;
    padding-left: 10px;
    list-style: none;
    li {
      width: 100%;
      margin: 0;
      display: flex;
      align-items: center;
      div {
        flex-shrink: 0;
        text-align: center;
        margin: 10px 0;
        font-size: 14px;
        &:nth-child(1) {
          width: 150px;
        }
        &:nth-child(2) {
          color: rgba(64, 158, 255, 1);
          width: 400px;
          font-weight: 600;
          text-align: left;
        }
        &:nth-child(3) {
          width: 100px;
        }
        &:nth-child(4) {
          width: 150px;
        }
        &:nth-child(5) {
          width: 100px;
        }
        &:nth-child(6) {
          width: 100px;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.el-tabs--border-card > .el-tabs__content {
  height: calc(100% - 29px - 40px);
  overflow: auto;
}
</style>
